<template>
  <div class="container">
    <!-- 由于html不区分大小写，所以js中驼峰命名方式在html中要改成短横线链接的形式 -->
    <home-header></home-header>
    <div class="content">
      <ul class="cont_ul">
          <list
              v-for="item in items"
              :price="item.price"
              :title="item.title">
          </list>
      </ul>
    </div>
  </div>
</template>
<style>
  .container {
    max-width: 640px;
    margin: 0 auto;
    overflow-x: hidden;
  }
  .cont_ul {
    padding-top: 0.05rem;
    margin: 0 -0.12rem;
     }   
  .cont_ul:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    clear: both;
  }
</style>
<script>
  //导入要用到的子组件
  import HomeHeader from '../components/HomeDeader'
  import List from '../components/List'

  export default{
    data(){
      return {
        items: [
          {price: "129.00", title: "大学"},
          {price: "69.00", title: "中庸"},
          {price: "29.00", title: "论语"},
          {price: "19.00", title: "孟子"},
          {price: "159.00", title: "易经经"},
          {price: "129.00", title: "道德经"},
          {price: "124.00", title: "金刚经"},
        ]
      }
    },
    //在components字段中，包含导入的子组件
    components:{
      HomeHeader,
      List
    }
  }

</script>
